import React from "react";
import { Input, Icon, Form/* , Checkbox */ } from "antd";

const InputSearch = Input.Search;

@Form.create()
class QueryExtra extends React.Component {

  // state = { checked: false }

  componentDidMount() {
    const { getFormThis } = this.props;
    if (getFormThis) getFormThis(this, "queryExtra");
  }

  handleSearch = value => {
    const { onSearch } = this.props;
    setTimeout(() => {
      if (onSearch instanceof Function) onSearch(value);
    }, 100);
  };

  /*
  handleChecked = e => {
    const { checked } = e.target;
    this.setState({ checked }, () => {
      this.handleSearch();
    });
  }
  */

  handleReset = () => {
    const { form } = this.props;
    // this.setState({ checked: false });
    form.resetFields();
  };

  handleSubmit = e => {
    if (e && e.preventDefault) e.preventDefault();
    const { form, handleParamsChange, keyName = "modelName" } = this.props;
    form.validateFields((err, values) => {
      if (err) {
        return;
      }
      const searchValue = values[keyName] || "";
      const param = { ...values, [keyName]: searchValue.trim() };
      if (handleParamsChange) handleParamsChange(param);
    });
  };

  render() {
    const {
      visible,
      handleFilterVisible,
      form,
      placeholder = "请输入流程名称",
      keyName = "modelName",
    } = this.props;
    const { getFieldDecorator } = form;
    // const { checked } = this.state;
    return (
      <Form layout='inline'>
        {/*
        <Form.Item
          label=""
          labelCol={{ span: 1 }}
          wrapperCol={{ span: 23 }}
          style={{ marginRight: 0 }}
        >
          {getFieldDecorator('timeOut', {
            initialValue: '',
          })(
            <Checkbox
              onChange={this.handleChecked}
              style={{ paddingRight: 16, minWidth: '90px' }}
              checked={checked}
            >
              超时单
            </Checkbox>
          )}
        </Form.Item>
        */}
        <Form.Item
          label=""
          labelCol={{ span: 1 }}
          wrapperCol={{ span: 23 }}
          style={{ marginRight: 0 }}
        >
          {getFieldDecorator(keyName, {
            initialValue: "",
          })(
            <InputSearch
              placeholder={placeholder}
              onSearch={this.handleSearch}
              className='input__search'
            />,
          )}
        </Form.Item>
        <Form.Item style={{ marginRight: 0 }}>
          <span className={`a__link advanced__filter ${visible && "advanced__filter__up"}`}>
            <span onClick={handleFilterVisible} style={{ cursor: "pointer" }}>
              <span>{visible ? "收起" : "高级筛选"}</span>
              {visible ? <Icon type="up" /> : <Icon type="down" />}
            </span>
          </span>
        </Form.Item>
      </Form>
    );
  }
}

export default QueryExtra;